安安～我是ChiYu～

近期專案改成 List 後，名稱、負責人和里程碑終於排整齊了。結果每列旁邊又冒出一整排小膠囊：紅底的「3」、藍底的「設計系統」、可以移除的「陳怡安 ×」，還有綠色的「已同步」。

我給 AI 的追加需求是：

請在每筆專案旁加上彩色標籤，顯示數量、分類、已選成員、篩選、同步狀態和負責人。

下面是依照第一版需求重建的錯誤現場。畫面使用虛構專案與人名，不含真實個資：

圖 1：六種責任共用同一種膠囊外觀。把顏色拿掉後，讀者無法判斷數量、分類、篩選與狀態，也不知道哪兩顆真的能操作。

它們排在一起很和諧，和諧到我開始不知道哪一顆能按。

上面那句 Prompt 交代了六種資料，卻沒有交代任何行為。AI 於是把 Badge、Tag、Chip 和狀態全部做成同一種圓角外觀，再補上一套 hover 效果。畫面很熱鬧，使用者卻得逐顆試吃：這顆會篩選、那顆能移除，還是其實什麼都不會發生？

今天先把顏色拿掉，只看三件事：

1. 元件正在表達什麼資訊？
2. 它能不能操作？
3. 操作後，哪一份資料或狀態會改變？

這三題會把 Badge、Tag、Chip、Filter Chip、Status Indicator 與 Avatar 分開。元件名稱在不同 Design System 裡不一定完全一致，有些系統會把可選、可移除的版本都收在 Tag 家族，有些則叫 Chip；真正需要寫進規格的，仍然是責任與操作結果。

完整 Demo 與比較流程整理在 Vibe UI Atlas 的小型標記比較頁。

先按一顆看看：資料真的從 8 筆回到 24 筆

網站一開始顯示「進行中，已選取」，下方是「目前顯示 8 筆資料」。我取消這個條件後，元件改成「進行中，未選取」，結果更新為 24 筆，狀態文字也補上「已移除進行中篩選」。

這次操作直接把 Filter Chip 從其他小膠囊裡抓了出來。它不是在描述分類，而是在控制目前資料集。

如果 Filter Chip 按完只從藍色變灰色，資料仍停在 8 筆，這顆控制項只完成換裝。反過來，唯讀 Tag 若出現手形游標和 hover，怎麼按都沒有結果，也是在對使用者開一張無法兌現的支票。

先分成三類：資訊、控制與辨識

六個元件不用排成一張英文單字表。先看它們在產品裡扮演哪一類角色，判斷會簡單很多。

這張表最重要的不是外形，而是互動承諾：資訊元件不應假裝能按，控制項則不能只靠換色表示結果；Avatar 若成為帳號選單入口，也必須從辨識圖像升級成有明確名稱的 Button。

Badge：它報告數量，不要叫小紅點自己兼任按鈕

Badge 常貼在圖示、導覽項目或標題旁，告訴使用者有幾筆待處理、幾則未讀，或出現了新內容。

LumenDesk 的 Demo 讓待處理申請從 3 筆更新為 2 筆。數字依附在「待處理申請」旁，不會單獨飄成一顆沒有主詞的紅點。

圖 2：Badge 貼著待處理申請顯示數量，資料更新後由 3 變成 2。

Badge 的產品規則至少要回答三件事：

• 零筆時要隱藏、顯示 0，還是寫成「沒有新項目」？
• 數量超過版面上限時，是顯示 99+，還是保留精確數字？
• 數量更新時，是否需要讓輔助科技得知變化？

LumenDesk 這次選擇超過 99 顯示 99+、零筆隱藏；換成稽核或告警系統，精確數字可能更重要。這些是產品決策，不是 Badge 的宇宙常數。

若 Badge 疊在鈴鐺按鈕上，可操作的是鈴鐺按鈕，Badge 只補充數量。按鈕名稱可以是「通知，3 則未讀」，不能讓一顆難以點擊、又沒有名稱的小紅點自己扛起整個入口。

查看 Badge 元件頁

Tag：只描述分類，就別用 hover 暗示可以點

Tag 適合放分類、標記或關鍵字，例如「設計系統」「無障礙」「高優先」。如果它只描述這筆內容屬於什麼，就應維持唯讀。

圖 3：Tag 顯示專案分類，沒有 hover、pointer cursor 或偽裝成按鈕的互動。

在這個網站裡，pointer cursor 與明顯 hover 都會被使用者理解成操作承諾。唯讀 Tag 如果跟著出現互動效果，讀者自然會期待它能篩選或開啟內容；按下去沒有結果，就不是「比較有互動感」，而是提示錯了。

如果產品真的希望點擊「設計系統」後篩選同類專案，就不要繼續把它描述成唯讀 Tag。改用 Link、Button 或 Filter Chip，並把按下後的結果、目前選取與返回方式寫清楚。

Carbon 的 Tag 指南把唯讀、可移除、可選取與操作型分成不同變體。這再次提醒我：名稱可以因設計系統而不同，責任不能跟著模糊。

查看 Tag 元件頁

Chip：叉號要說清楚，也要交代移除後焦點去哪裡

Chip 常代表使用者已經加入的值，例如收件人、已選成員或搜尋關鍵字。LumenDesk 的例子是「陳怡安」，旁邊的移除按鈕不能只叫「關閉」或「刪除」。

圖 4：Chip 顯示已選成員陳怡安，移除操作使用「移除成員陳怡安」這類完整名稱。

移除後，畫面要同步更新選取結果，也要讓使用者知道剛才移除的是誰。若一排有多顆 Chip，焦點政策也不能留白：

• 還有下一顆時，可把焦點移到下一個移除按鈕。
• 移除最後一顆時，焦點回到新增成員的輸入框或按鈕。
• 若提供 Undo，要說明有效時間與資料是否已經送到後端。

如果整顆 Chip 按下去是一種行為，右側叉號又做另一件事，操作很容易混亂。除非產品真的需要，不要讓這麼小的元件同時負責選取、開啟詳細資料與移除；它的體積已經夠辛苦了。

查看 Chip 元件頁

Filter Chip：背景變色只是提示，資料、網址與清除方式都要同步

Filter Chip 是篩選控制項。它至少要顯示已選取與未選取，按下後還要真的更新資料；如果只有背景色切換，篩選功能就只活在 CSS 裡。

圖 5：Filter Chip 在「進行中，已選取」與「進行中，未選取」之間切換，資料同步顯示 8 筆或 24 筆。

這次操作通過，是因為三件事對得上：元件名稱說出選取狀態、資料筆數真的更新，狀態文字也補上「已移除進行中篩選」。藍色變成灰色只是一條視覺線索。

Filter Chip 可以採用具有按下狀態的 Toggle Button，也可能接近 Checkbox 的選取模型；同一組篩選要選定一致語意，不能只靠 CSS 換色。

正式產品還要決定：

• 多個 Filter Chip 是 AND 還是 OR？
• 切換後是否回到第一頁？
• 篩選條件要不要寫入 URL，讓重新整理與分享後仍能恢復？
• 清除全部後，焦點回到哪裡，結果數量如何更新？
• 請求失敗時，要保留原結果、還原 Chip，還是顯示失敗狀態？

Filter Chip 適合少量、常用且容易理解的條件。條件到了幾十個，還需要搜尋或多層分類時，Filter Panel、Select 或 Combobox 會比較合適。別讓使用者在兩排 Chip 裡找一個篩選，像在零食櫃裡翻遙控器。

查看 Filter Chip 元件頁

Status Indicator：拿掉紅綠色，還要看得出現在發生什麼

Status Indicator 用來報告同步、服務、任務或人員目前的狀態。顏色可以幫忙掃讀，但文字才負責把意思說完整，必要時再補上圖示或形狀。

圖 6：同步狀態同時使用文字、圖示與顏色；不看顏色仍能辨識「已同步」或「同步延遲」。

一顆綠點在不同產品裡可能代表上線、健康、成功或可用。沒有文字時，剩下的就是產品內部通靈大會。狀態名稱也應站在使用者角度：比起內部代碼 S2，顯示「同步延遲，最後更新於 09:45」更能幫助判斷。

狀態如果會隨時間失效，還要一起顯示資料新鮮度。昨天的「已同步」不能在今天斷線後繼續裝作現況；前端要依最後更新時間、連線狀態與後端結果重新判斷。狀態變化需要宣布時，也應避免輪詢每幾秒就重複朗讀相同內容。

Carbon 的 Status Indicator Pattern同樣要求狀態不能只靠顏色傳達。正式發布前，我仍會用灰階與螢幕閱讀器複驗名稱，不拿彩色截圖替這兩項蓋章。

查看 Status Indicator 元件頁

Avatar：照片載入失敗，姓名和縮寫還得把人認出來

Avatar 用照片、縮寫或圖示協助辨識使用者、團隊或其他實體。它不能取代姓名；多人同名、照片缺失或圖片載入失敗時，旁邊的文字仍然有工作要做。

圖 7：照片無法載入時改用縮寫或替代圖示，旁邊仍保留林子安與產品設計。

照片沒有出勤，姓名和角色還在，版面也不會突然塌掉。這才是 Avatar 的備援；換一張更精緻的預設頭像，只解決空洞長什麼樣子。

若照片旁已經顯示「林子安」，圖片本身可以視為裝飾，避免姓名被朗讀兩次。若 Avatar 單獨出現或能開啟個人選單，整個入口就要有清楚的 Button 名稱，例如「開啟林子安的帳號選單」。不能只把一張沒有替代內容的照片設成可點擊，再期待使用者自己猜入口用途。

縮寫也不是全世界都能用「名字第一個字」解決。不同語言、同名使用者與團隊帳號都可能撞字；縮寫只是一條備援線索，不能被當成唯一身分識別。

查看 Avatar 元件頁

小型標記選型：外形會撞臉，操作結果不會

六種元件拆完後，再回到 小型標記比較頁看判斷流程。

圖 8：先判斷元件要報告數量、描述分類、代表選取值、控制篩選、回報狀態，還是辨識人員。

我會用下面六句話選：

• 要報告數量，用 Badge。
• 要描述分類，用唯讀 Tag。
• 要顯示並移除已選值，用 Chip。
• 要切換篩選並更新結果，用 Filter Chip。
• 要報告目前狀態，用 Status Indicator。
• 要協助辨識人員、團隊或實體，用 Avatar。

Tag 與 Chip 在不同設計系統裡可能共用家族名稱，這不妨礙我們寫清楚行為。需求不能省略「能不能操作」「操作後改變什麼」與「失敗時如何復原」；只丟一個元件名給 AI，它仍然有很大空間自行發揮。

改寫 Prompt：把六顆彩色標籤拆成六份責任

請為 LumenDesk 的成員管理頁設計小型標記元件，不能把所有內容都做成同一種彩色膠囊。

- Badge：顯示待處理申請數量。超過 99 顯示 99+，零筆時隱藏；若數量動態改變，只在有意義時宣布更新。
- Tag：顯示唯讀分類「設計系統」「無障礙」，不要加 hover、pointer cursor 或鍵盤入口。
- Chip：顯示已選成員。每個移除按鈕都要包含成員姓名；移除後更新選取結果，並把焦點移到下一個合理位置。
- Filter Chip：顯示「進行中」是否已選取。操作後同步更新結果筆數、頁碼與可被察覺的狀態訊息；請明確定義多條件是 AND 還是 OR。
- Status Indicator：使用文字、圖示與顏色共同顯示「已同步」或「同步延遲」，並顯示最後更新時間，不得只靠紅綠色。
- Avatar：照片失敗時顯示縮寫，旁邊保留姓名與角色；若 Avatar 能開啟帳號選單，使用有完整名稱的 button。

所有可操作項目提供 focus、disabled 與鍵盤操作；360px 時可以換行，不得截掉元件名稱。請同時處理資料更新失敗、清除篩選與圖片載入失敗。

這份 Prompt 直接規定數量上限、唯讀外觀、移除名稱、篩選結果、狀態新鮮度與照片備援。AI 可以調整圓角和顏色，但不能把六種責任重新攪回同一包小膠囊。

驗收小型標記：先轉成灰階，再逐顆操作

交付前，我會照下面的順序檢查：

1. Badge 的數量代表什麼？零筆與超過上限時怎麼顯示？
2. 唯讀 Tag 是否出現錯誤的 hover、pointer cursor 或鍵盤入口？
3. Chip 的移除按鈕是否說出要移除哪個值？移除後焦點與結果去哪裡？
4. Filter Chip 的選取名稱、資料筆數、頁碼與狀態訊息是否同步？
5. Status Indicator 不看顏色時，是否仍能讀出狀態與資料新鮮度？
6. Avatar 圖片失敗後，是否仍能辨識對象與角色？

目前 Filter Chip 從 8 筆切回 24 筆的操作已通過，Chip、Tag 與 Avatar 也保留對應名稱和備援畫面。灰階辨識與正式螢幕閱讀器實聽仍待發布前複驗，這兩項不能因為截圖看起來清楚就提前勾掉。

六種小元件不再靠顏色認親，24 筆資料卻需要更強的管理工具

開頭那排小膠囊現在有了分工：Badge 報數量、Tag 說分類、Chip 保存已選值、Filter Chip 改變結果、Status Indicator 回報狀態，Avatar 協助辨識對象。就算先不看顏色，文字和操作仍能把它們分開。

篩選拿掉後，成員資料也從 8 筆回到 24 筆。到了這個數量，管理員開始需要排序、搜尋、多筆選取與批次操作；但一句「做企業級 Data Table」很可能一次開滿所有功能，順便附贈一整套鍵盤、跨頁與手機版成本。

我把需求縮成一句很有氣勢的 Prompt：

幫我做一個功能完整的企業級 Data Table。

結果搜尋、四種篩選、儲存檢視、密度、欄位設定、固定欄位、匯出、重新整理與分頁全部報到。

圖 9：使用者只想選取兩位離職成員並停用帳號，第一版工具列卻先端出十一個控制項，表頭、列操作與分頁還在後面排隊。

功能沒有哪一項明顯做錯，麻煩正是每一項看起來都很合理。當它們一起出現，使用者還沒開始找那兩位成員，已經先收到一份表格操作考卷。

明天就從這張吃到飽版本往回拆。每增加一項能力，都要說清楚它到底替哪個管理任務工作。

參考來源

• Carbon Design System：Tag
• Carbon Design System：Status Indicator Pattern
• Atlassian Design System：Components
• Atlassian Design System：Lozenge

資料查閱：2026-08-07。